<script lang="ts" setup>
import themeManager from '~/util/theme_manager'

const theme = themeManager.getTheme()

const menuIconStyle = { stroke: 'red' }

const sidebarStyle = computed(() => {
  return {
    'background': themeManager.getTheme().getColor(1),
    'border-right': `1px solid ${themeManager.getTheme().getColor(0)}`,
  }
})

const inject = () => {
  const node = document.createElement('style')
  node.innerHTML = `
        svg.menu-icon path {
          fill: ${theme.getColor(3)}c0;
        }
        svg.menu-icon rect {
          fill: ${theme.getColor(3)}c0;
        }
        svg.menu-icon circle {
          fill: ${theme.getColor(3)}c0;
        }
      `
  document.body.appendChild(node)
}

onMounted(() => {
  inject()
})
</script>

<template>
  <div id="sidebar" :style="sidebarStyle">
    <div class="menu-item" title="Monitor" @click="$emit('change', 0)">
      <svg class="menu-icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <path
          d="m296 372c5.519531 0 10-4.480469 10-10s-4.480469-10-10-10-10 4.480469-10 10 4.480469 10 10 10zm0 0"
        />
        <path
          d="m482 0h-452c-16.542969 0-30 13.457031-30 30v352c0 16.542969 13.457031 30 30 30h176v10c0 16.542969-13.457031 30-30 30-27.625 0-50 22.375-50 50 0 5.523438 4.476562 10 10 10h240c5.523438 0 10-4.476562 10-10 0-27.621094-22.375-50-50-50-8.007812 0-15.539062-3.121094-21.207031-8.789062-5.671875-5.671876-8.792969-13.203126-8.792969-21.210938v-10h176c16.542969 0 30-13.457031 30-30v-352c0-16.542969-13.457031-30-30-30zm-146 472c13.316406 0 24.277344 8.609375 28.296875 20h-216.59375c4.015625-11.382812 14.976563-20 28.296875-20zm-39.996094-20h-80.03125c6.292969-8.363281 10.027344-18.753906 10.027344-30v-10h60v10c0 10.964844 3.515625 21.390625 10.003906 30zm195.996094-70c0 5.515625-4.484375 10-10 10h-452c-5.515625 0-10-4.484375-10-10v-50h472zm-429-70v-252h386v252zm429 0h-23v-262c0-5.523438-4.476562-10-10-10h-406c-5.523438 0-10 4.476562-10 10v262h-23v-282c0-5.515625 4.484375-10 10-10h452c5.515625 0 10 4.484375 10 10zm0 0"
        />
        <path
          d="m176 106h-80c-5.523438 0-10 4.476562-10 10v100c0 5.523438 4.476562 10 10 10h80c5.523438 0 10-4.476562 10-10v-100c0-5.523438-4.476562-10-10-10zm-10 100h-60v-80h60zm0 0"
        />
        <path
          d="m296 106h-80c-5.523438 0-10 4.476562-10 10v100c0 5.523438 4.476562 10 10 10h80c5.523438 0 10-4.476562 10-10v-100c0-5.523438-4.476562-10-10-10zm-10 100h-60v-80h60zm0 0"
        />
        <path
          d="m416 106h-80c-5.523438 0-10 4.476562-10 10v100c0 5.523438 4.476562 10 10 10h80c5.523438 0 10-4.476562 10-10v-100c0-5.523438-4.476562-10-10-10zm-10 100h-60v-80h60zm0 0"
        />
        <path
          d="m176 246h-80c-5.523438 0-10 4.476562-10 10s4.476562 10 10 10h80c5.523438 0 10-4.476562 10-10s-4.476562-10-10-10zm0 0"
        />
        <path
          d="m296 246h-80c-5.523438 0-10 4.476562-10 10s4.476562 10 10 10h80c5.523438 0 10-4.476562 10-10s-4.476562-10-10-10zm0 0"
        />
        <path
          d="m416 246h-80c-5.523438 0-10 4.476562-10 10s4.476562 10 10 10h80c5.523438 0 10-4.476562 10-10s-4.476562-10-10-10zm0 0"
        />
        <path
          d="m216 372h40c5.523438 0 10-4.476562 10-10s-4.476562-10-10-10h-40c-5.523438 0-10 4.476562-10 10s4.476562 10 10 10zm0 0"
        />
      </svg>
    </div>
    <div class="menu-item" title="Monitor" @click="$emit('change', 1)">
      <svg
        class="menu-icon"
        version="1.1"
        id="Layer_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 480 480"
        style="enable-background:new 0 0 480 480;"
        xml:space="preserve"
      >
        <g>
          <g>
            <path
              d="M421.648,74.336L349.664,2.352C348.216,0.896,346.216,0,344,0H96C73.944,0,56,17.944,56,40v400c0,22.056,17.944,40,40,40
			h288c22.056,0,40-17.944,40-40V80C424,77.784,423.104,75.784,421.648,74.336z M352,27.312L396.688,72H352V27.312z M408,440
			c0,13.232-10.768,24-24,24H96c-13.232,0-24-10.768-24-24V40c0-13.232,10.768-24,24-24h240v64c0,4.424,3.584,8,8,8h64V440z"
            />
          </g>
        </g>
        <g>
          <g>
            <path
              d="M128,112c-17.648,0-32,14.352-32,32s14.352,32,32,32s32-14.352,32-32S145.648,112,128,112z M128,160
			c-8.824,0-16-7.176-16-16c0-8.824,7.176-16,16-16c8.824,0,16,7.176,16,16C144,152.824,136.824,160,128,160z"
            />
          </g>
        </g>
        <g>
          <g>
            <path
              d="M128,200c-17.648,0-32,14.352-32,32s14.352,32,32,32s32-14.352,32-32S145.648,200,128,200z M128,248
			c-8.824,0-16-7.176-16-16c0-8.824,7.176-16,16-16c8.824,0,16,7.176,16,16C144,240.824,136.824,248,128,248z"
            />
          </g>
        </g>
        <g>
          <g>
            <path
              d="M128,288c-17.648,0-32,14.352-32,32s14.352,32,32,32s32-14.352,32-32S145.648,288,128,288z M128,336
			c-8.824,0-16-7.176-16-16c0-8.824,7.176-16,16-16c8.824,0,16,7.176,16,16C144,328.824,136.824,336,128,336z"
            />
          </g>
        </g>
        <g>
          <g>
            <path
              d="M128,376c-17.648,0-32,14.352-32,32s14.352,32,32,32s32-14.352,32-32S145.648,376,128,376z M128,424
			c-8.824,0-16-7.176-16-16c0-8.824,7.176-16,16-16c8.824,0,16,7.176,16,16C144,416.824,136.824,424,128,424z"
            />
          </g>
        </g>
        <g>
          <g>
            <rect x="176" y="152" width="208" height="16" />
          </g>
        </g>
        <g>
          <g>
            <rect x="184" y="40" width="112" height="16" />
          </g>
        </g>
        <g>
          <g>
            <rect x="160" y="72" width="160" height="16" />
          </g>
        </g>
        <g>
          <g>
            <rect x="176" y="240" width="208" height="16" />
          </g>
        </g>
        <g>
          <g>
            <rect x="176" y="328" width="208" height="16" />
          </g>
        </g>
        <g>
          <g>
            <rect x="176" y="416" width="208" height="16" />
          </g>
        </g>
        <g>
          <g>
            <rect x="240" y="120" width="16" height="16" />
          </g>
        </g>
        <g>
          <g>
            <rect x="208" y="120" width="16" height="16" />
          </g>
        </g>
        <g>
          <g>
            <rect x="176" y="120" width="16" height="16" />
          </g>
        </g>
        <g />
        <g />
        <g />
        <g />
        <g />
        <g />
        <g />
        <g />
        <g />
        <g />
        <g />
        <g />
        <g />
        <g />
        <g />
      </svg>
    </div>

    <div class="menu-item menu-item-setting" title="Setting" @click="$emit('change', -2)">
      <svg
        class="menu-icon"
        enable-background="new 0 0 512 512"
        height="512"
        viewBox="0 0 512 512"
        width="512"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="m364.821 388c31.729 0 57.542-25.813 57.542-57.542v-160.109h89.637v-30h-89.637v-52.016h13.917v-88.333h-140v88.333h11v52.016h-60.197v-52.016h13.917v-88.333h-140v88.333h11v52.016h-68v-140.349h-30v420.667h-34v91.333h512v-91.333h-448v-250.318h68v160.109c0 31.729 25.813 57.542 57.542 57.542s57.541-25.813 57.541-57.542v-160.109h60.197v160.109c0 31.729 25.813 57.542 57.541 57.542zm117.179 94h-452v-31.333h452zm-331-452h80v28.333h-80zm11 58.333h55.083v52.016h-55.083zm27.542 269.667c-15.187 0-27.542-12.355-27.542-27.542v-77.975c.467-.187.956-.362 1.472-.514 5.412-1.597 11.003-.162 17.101 4.387 9.65 7.2 19.283 10.001 28.148 10.001 2.877 0 5.672-.299 8.362-.835v64.936c0 15.187-12.354 27.542-27.541 27.542zm27.541-124.417c-.909.607-1.957 1.211-3.108 1.703-3.4 1.449-8.229 2.42-15.463-2.976-13.15-9.812-25.832-12.005-36.512-10.611v-51.35h55.083zm147.738 124.417c-15.187 0-27.541-12.355-27.541-27.542v-77.32c.848-.427 1.84-.847 2.93-1.169 5.412-1.597 11.003-.162 17.101 4.387 9.65 7.2 19.283 10.001 28.148 10.001 2.363 0 4.664-.219 6.904-.587v64.689c0 15.186-12.355 27.541-27.542 27.541zm27.542-123.528c-.522.29-1.072.567-1.65.814-3.401 1.449-8.229 2.42-15.463-2.976-13.752-10.262-26.997-12.197-37.97-10.403v-51.559h55.083zm-66.083-204.472h80v28.333h-80zm11 58.333h55.083v52.016h-55.083z"
        />
      </svg>
    </div>
    <div class="menu-item" title="Setting" @click="$emit('change', -1)">
      <svg class="menu-icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <path
          d="m307.796875 512h-103.59375l-13.550781-46.621094c-12.585938-3.9375-24.792969-9.003906-36.460938-15.140625l-42.585937 23.40625-73.25-73.25 23.402343-42.585937c-6.132812-11.667969-11.199218-23.875-15.136718-36.460938l-46.621094-13.550781v-103.59375l46.621094-13.550781c3.9375-12.585938 9.003906-24.792969 15.140625-36.460938l-23.40625-42.585937 73.25-73.25 42.585937 23.402343c11.667969-6.132812 23.875-11.199218 36.460938-15.136718l13.550781-46.621094h103.59375l13.550781 46.621094c12.585938 3.9375 24.792969 9.003906 36.460938 15.140625l42.585937-23.40625 73.25 73.25-23.402343 42.585937c6.132812 11.667969 11.199218 23.875 15.136718 36.460938l46.621094 13.550781v103.59375l-46.621094 13.550781c-3.9375 12.585938-9.003906 24.792969-15.140625 36.460938l23.40625 42.585937-73.25 73.25-42.585937-23.402343c-11.667969 6.132812-23.875 11.199218-36.460938 15.136718zm-81.070313-30h58.546876l11.917968-41 8.140625-2.199219c15.734375-4.25 30.863281-10.53125 44.972657-18.671875l7.316406-4.222656 37.484375 20.601562 41.402343-41.402343-20.601562-37.484375 4.222656-7.316406c8.140625-14.105469 14.421875-29.238282 18.671875-44.972657l2.199219-8.140625 41-11.917968v-58.546876l-41-11.917968-2.199219-8.140625c-4.25-15.734375-10.53125-30.863281-18.671875-44.972657l-4.222656-7.316406 20.601562-37.484375-41.402343-41.398437-37.484375 20.597656-7.316406-4.222656c-14.109376-8.140625-29.238282-14.421875-44.972657-18.671875l-8.140625-2.199219-11.917968-41h-58.546876l-11.917968 41-8.140625 2.199219c-15.734375 4.25-30.863281 10.53125-44.972657 18.671875l-7.316406 4.222656-37.484375-20.601562-41.402343 41.402343 20.601562 37.484375-4.222656 7.316406c-8.140625 14.105469-14.421875 29.238282-18.671875 44.972657l-2.199219 8.140625-41 11.917968v58.546876l41 11.917968 2.199219 8.140625c4.25 15.734375 10.53125 30.863281 18.671875 44.972657l4.222656 7.316406-20.601562 37.484375 41.402343 41.402343 37.484375-20.601562 7.316406 4.222656c14.105469 8.140625 29.238282 14.421875 44.972657 18.671875l8.140625 2.199219zm0 0"
        />
        <path
          d="m256 326.179688c-38.695312 0-70.179688-31.480469-70.179688-70.179688s31.480469-70.179688 70.179688-70.179688 70.179688 31.480469 70.179688 70.179688-31.484376 70.179688-70.179688 70.179688zm0-110.359376c-22.15625 0-40.179688 18.023438-40.179688 40.179688s18.023438 40.179688 40.179688 40.179688 40.179688-18.023438 40.179688-40.179688-18.023438-40.179688-40.179688-40.179688zm0 0"
        />
        <path
          d="m256 386.179688c-71.78125 0-130.179688-58.398438-130.179688-130.179688s58.398438-130.179688 130.179688-130.179688 130.179688 58.398438 130.179688 130.179688-58.398438 130.179688-130.179688 130.179688zm0-230.359376c-55.238281 0-100.179688 44.941407-100.179688 100.179688s44.941407 100.179688 100.179688 100.179688 100.179688-44.941407 100.179688-100.179688-44.941407-100.179688-100.179688-100.179688zm0 0"
        />
      </svg>
    </div>
  </div>
</template>


<style scoped>
#sidebar {
  height: 100vh;
  width: 60px;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 12px 0;
  flex-shrink: 0;
}

.menu-item {
  user-select: none;
  cursor: pointer;
}

.menu-item-setting {
  margin-top: auto;
}

.menu-icon {
  width: 30px;
  height: 30px;
  margin: 12px 0;
}
</style>